<template>
	<view class="checkbox-tabs">
		<view class="item" :class="{current:(tabItem.value==current)}" v-for="(tabItem,tabItemKey) in items" @click="click(tabItem)"
		 :key="tabItemKey">{{tabItem.label}}</view>
	</view>
</template>
<script>
	export default {
		name: 'MyTabs',
		props: {
			items: {
				type: Array,
				default: null
			},
			value: {
				default: null
			}
		},
		data() {
			return {
				current: this.value
			}
		},
		methods: {
			click(item) {
				this.current = item.value
				this.$emit('onTabChange', item.value)
			}
		},
		watch: {
			value(val) {
				this.current = val
			}
		}
	}
</script>
<style lang="scss">
	.checkbox-tabs {
		border-right: 1upx solid #eee;
		display: flex;
		font-size: $uni-font-size-base;
		.item {
			border: 1upx solid #eee;
			border-right: none;
			padding: 10upx 10upx;
			cursor: pointer;
			width: 70upx;
			text-align: center;
			display: inline-block;
		}
		.current {
			background-color: #2d8cf0;
			color: white;
		}
	}
</style>
